<template>
  <div class="risk-distribution-container">
    <div class="table-container">
      <div class="tr-item table-header">
        <div class="col-6" v-for="h in data.header">
          <span>{{ h.name }}</span>
          <div class="tr-header-sort" v-if="h.sort">
            <span class="sort-up sort-icon"></span>
            <span class="sort-down sort-icon"></span>
          </div>
        </div>
      </div>

      <!-- table item -->
      <div class="tr-item" v-for="row in data.row">
        <div class="col-6" v-for="e in row">
          <span :class="e.class">{{ e.content }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        default: () => {},
      }
    }
  }
</script>

<style lang="scss">
  .risk-distribution-container {
    height: 110px;
    padding: 10px 8px 2px;
    background:linear-gradient(180deg, rgba(1,138,244,0.21), transparent);
    overflow: auto;

    .table-container {
      border: 1px solid rgba(42, 162, 194, 1);
      padding: 2px 1px 0;

      .tr-item {
        border: 1px solid rgba(68, 240, 255, .4);
        margin-bottom: 1px;
        line-height: 0;

        .col-6 {
          box-sizing:  border-box;
          display: inline-block;
          width: 16.6%;
          line-height: 18px;
          text-align: center;
          font-size: 6px;
          color: rgba(0, 241, 255, 1);

          .tr-header-sort {
            display: inline-flex;
            flex-direction: column;
            margin-left: 2px;
            vertical-align: middle;

            .sort-icon {
              display: inline-block;
              width: 4px;
              height: 4px;
              background-size: 100% 100%;
              background-image: url("~assets/images/arrow.png");

              &.sort-up {
                margin-bottom: 1px;
                background-image: url("~assets/images/arrow-up.png");
              }
            }
          }

          .orange {
            color: rgba(255, 255, 0, 1);
          }

          .white {
            color: #fff;
          }
        }

        &.table-header {
          background: rgba(52,134,218, .2);
          padding: 3px 0;

          .col-6 {
            line-height: 12px;
            color: #fff;
            border-right: 1px solid rgba(68, 240, 255, .4);

            &:last-child {
              border-right: none;
            }
          }
        }
      }
    }
  }
</style>
